<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="用户ID" prop="userId">
        <el-input v-model="formData.userId" placeholder="请输入用户ID" />
      </el-form-item>
      <el-form-item label="订单编号" prop="orderNo">
        <el-input v-model="formData.orderNo" placeholder="请输入订单编号" />
      </el-form-item>
      <el-form-item label="教练ID" prop="coachId">
        <el-input v-model="formData.coachId" placeholder="请输入教练ID" />
      </el-form-item>
      <el-form-item label="上课日期" prop="attendClassDate">
        <el-date-picker
          v-model="formData.attendClassDate"
          type="date"
          value-format="x"
          placeholder="选择上课日期"
        />
      </el-form-item>
      <el-form-item label="上课地点ID" prop="venueId">
        <el-input v-model="formData.venueId" placeholder="请输入上课地点ID" />
      </el-form-item>
      <el-form-item label="上课地点名称" prop="venueName">
        <el-input v-model="formData.venueName" placeholder="请输入上课地点名称" />
      </el-form-item>
      <el-form-item label="服务一级分类ID" prop="servicePId">
        <el-input v-model="formData.servicePId" placeholder="请输入服务一级分类ID" />
      </el-form-item>
      <el-form-item label="服务一级分类名称" prop="servicePName">
        <el-input v-model="formData.servicePName" placeholder="请输入服务一级分类名称" />
      </el-form-item>
      <el-form-item label="服务二级分类ID" prop="serviceId">
        <el-input v-model="formData.serviceId" placeholder="请输入服务二级分类ID" />
      </el-form-item>
      <el-form-item label="服务二级分类名称" prop="serviceName">
        <el-input v-model="formData.serviceName" placeholder="请输入服务二级分类名称" />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="formData.startTime"
          type="date"
          value-format="x"
          placeholder="选择开始时间"
        />
      </el-form-item>
      <el-form-item label="教学人数（字典：business_coach_service_people_count）" prop="peopleCount">
        <el-input v-model="formData.peopleCount" placeholder="请输入教学人数（字典：business_coach_service_people_count）" />
      </el-form-item>
      <el-form-item label="教学时间（字典：business_coach_service_time）" prop="serviceTime">
        <el-date-picker
          v-model="formData.serviceTime"
          type="date"
          value-format="x"
          placeholder="选择教学时间（字典：business_coach_service_time）"
        />
      </el-form-item>
      <el-form-item label="雪板类型（字典：business_snowboard_type）" prop="snowboardType">
        <el-select v-model="formData.snowboardType" placeholder="请选择雪板类型（字典：business_snowboard_type）">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="滑行水平（字典：business_gliding_level）" prop="businessGlidingLevel">
        <el-input v-model="formData.businessGlidingLevel" placeholder="请输入滑行水平（字典：business_gliding_level）" />
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
      </el-form-item>
      <el-form-item label="联络手机号" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入联络手机号" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="预估价格（单位分）" prop="estimatedAmount">
        <el-input v-model="formData.estimatedAmount" placeholder="请输入预估价格（单位分）" />
      </el-form-item>
      <el-form-item label="实付金额（单位分）" prop="paymentAmount">
        <el-input v-model="formData.paymentAmount" placeholder="请输入实付金额（单位分）" />
      </el-form-item>
      <el-form-item label="预估收益（单位分）根据实付金额计算" prop="profitAmount">
        <el-input v-model="formData.profitAmount" placeholder="请输入预估收益（单位分）根据实付金额计算" />
      </el-form-item>
      <el-form-item label="收益到账时间" prop="profitArrivalTime">
        <el-date-picker
          v-model="formData.profitArrivalTime"
          type="date"
          value-format="x"
          placeholder="选择收益到账时间"
        />
      </el-form-item>
      <el-form-item label="下单时间" prop="orderTime">
        <el-date-picker
          v-model="formData.orderTime"
          type="date"
          value-format="x"
          placeholder="选择下单时间"
        />
      </el-form-item>
      <el-form-item label="支付状态（0待支付；1已支付）" prop="paymentStatus">
        <el-radio-group v-model="formData.paymentStatus">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="支付时间" prop="paymentTime">
        <el-date-picker
          v-model="formData.paymentTime"
          type="date"
          value-format="x"
          placeholder="选择支付时间"
        />
      </el-form-item>
      <el-form-item label="接单时间" prop="receivedTime">
        <el-date-picker
          v-model="formData.receivedTime"
          type="date"
          value-format="x"
          placeholder="选择接单时间"
        />
      </el-form-item>
      <el-form-item label="取消时间" prop="cancelTime">
        <el-date-picker
          v-model="formData.cancelTime"
          type="date"
          value-format="x"
          placeholder="选择取消时间"
        />
      </el-form-item>
      <el-form-item label="取消类型（0未取消；1系统自动取消；2用户取消；3教练取消）" prop="cancelType">
        <el-select v-model="formData.cancelType" placeholder="请选择取消类型（0未取消；1系统自动取消；2用户取消；3教练取消）">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="上课时间" prop="attendClassTime">
        <el-date-picker
          v-model="formData.attendClassTime"
          type="date"
          value-format="x"
          placeholder="选择上课时间"
        />
      </el-form-item>
      <el-form-item label="上课图片" prop="attendClassImages">
        <UploadImg v-model="formData.attendClassImages" />
      </el-form-item>
      <el-form-item label="订单类型（0一键约课；1直选教练约课）类型为 1 的，若教练不接单，则自动取消订单，并退款" prop="orderType">
        <el-radio-group v-model="formData.orderType">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="订单状态（0待接单；1已取消；2待上课；3待确认；4已完成）" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="退款状态（0未退款；1退款中；2已到账）" prop="refundStatus">
        <el-radio-group v-model="formData.refundStatus">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="退款单号" prop="refundOrderNo">
        <el-input v-model="formData.refundOrderNo" placeholder="请输入退款单号" />
      </el-form-item>
      <el-form-item label="退款时间" prop="refundTime">
        <el-date-picker
          v-model="formData.refundTime"
          type="date"
          value-format="x"
          placeholder="选择退款时间"
        />
      </el-form-item>
      <el-form-item label="退款到账时间" prop="refundArrivalTime">
        <el-date-picker
          v-model="formData.refundArrivalTime"
          type="date"
          value-format="x"
          placeholder="选择退款到账时间"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { OrderApi, Order } from '@/api/business/order'

/** 订单 表单 */
defineOptions({ name: 'OrderForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  userId: undefined,
  orderNo: undefined,
  coachId: undefined,
  attendClassDate: undefined,
  venueId: undefined,
  venueName: undefined,
  servicePId: undefined,
  servicePName: undefined,
  serviceId: undefined,
  serviceName: undefined,
  startTime: undefined,
  peopleCount: undefined,
  serviceTime: undefined,
  snowboardType: undefined,
  businessGlidingLevel: undefined,
  nickname: undefined,
  mobile: undefined,
  remark: undefined,
  estimatedAmount: undefined,
  paymentAmount: undefined,
  profitAmount: undefined,
  profitArrivalTime: undefined,
  orderTime: undefined,
  paymentStatus: undefined,
  paymentTime: undefined,
  receivedTime: undefined,
  cancelTime: undefined,
  cancelType: undefined,
  attendClassTime: undefined,
  attendClassImages: undefined,
  orderType: undefined,
  status: undefined,
  refundStatus: undefined,
  refundOrderNo: undefined,
  refundTime: undefined,
  refundArrivalTime: undefined,
})
const formRules = reactive({
  userId: [{ required: true, message: '用户ID不能为空', trigger: 'blur' }],
  orderNo: [{ required: true, message: '订单编号不能为空', trigger: 'blur' }],
  attendClassDate: [{ required: true, message: '上课日期不能为空', trigger: 'blur' }],
  venueId: [{ required: true, message: '上课地点ID不能为空', trigger: 'blur' }],
  venueName: [{ required: true, message: '上课地点名称不能为空', trigger: 'blur' }],
  servicePId: [{ required: true, message: '服务一级分类ID不能为空', trigger: 'blur' }],
  servicePName: [{ required: true, message: '服务一级分类名称不能为空', trigger: 'blur' }],
  serviceId: [{ required: true, message: '服务二级分类ID不能为空', trigger: 'blur' }],
  serviceName: [{ required: true, message: '服务二级分类名称不能为空', trigger: 'blur' }],
  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  peopleCount: [{ required: true, message: '教学人数（字典：business_coach_service_people_count）不能为空', trigger: 'blur' }],
  serviceTime: [{ required: true, message: '教学时间（字典：business_coach_service_time）不能为空', trigger: 'blur' }],
  nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  mobile: [{ required: true, message: '联络手机号不能为空', trigger: 'blur' }],
  estimatedAmount: [{ required: true, message: '预估价格（单位分）不能为空', trigger: 'blur' }],
  profitAmount: [{ required: true, message: '预估收益（单位分）根据实付金额计算不能为空', trigger: 'blur' }],
  orderTime: [{ required: true, message: '下单时间不能为空', trigger: 'blur' }],
  orderType: [{ required: true, message: '订单类型（0一键约课；1直选教练约课）类型为 1 的，若教练不接单，则自动取消订单，并退款不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '订单状态（0待接单；1已取消；2待上课；3待确认；4已完成）不能为空', trigger: 'blur' }],
  refundStatus: [{ required: true, message: '退款状态（0未退款；1退款中；2已到账）不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await OrderApi.getOrder(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as Order
    if (formType.value === 'create') {
      await OrderApi.createOrder(data)
      message.success(t('common.createSuccess'))
    } else {
      await OrderApi.updateOrder(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    userId: undefined,
    orderNo: undefined,
    coachId: undefined,
    attendClassDate: undefined,
    venueId: undefined,
    venueName: undefined,
    servicePId: undefined,
    servicePName: undefined,
    serviceId: undefined,
    serviceName: undefined,
    startTime: undefined,
    peopleCount: undefined,
    serviceTime: undefined,
    snowboardType: undefined,
    businessGlidingLevel: undefined,
    nickname: undefined,
    mobile: undefined,
    remark: undefined,
    estimatedAmount: undefined,
    paymentAmount: undefined,
    profitAmount: undefined,
    profitArrivalTime: undefined,
    orderTime: undefined,
    paymentStatus: undefined,
    paymentTime: undefined,
    receivedTime: undefined,
    cancelTime: undefined,
    cancelType: undefined,
    attendClassTime: undefined,
    attendClassImages: undefined,
    orderType: undefined,
    status: undefined,
    refundStatus: undefined,
    refundOrderNo: undefined,
    refundTime: undefined,
    refundArrivalTime: undefined,
  }
  formRef.value?.resetFields()
}
</script>
